<template>
    <div class="creat_box">
        <h2 style="text-align:center">{{ title }}</h2>
        <h6>{{ upLoadtitle }}</h6>
        <div class="upload_box">
            <UpLoad url="/api/upload" :onFinish='finish' :defaultImg="defaultImg" :background="uploadBackground"
                :beforeUpload="beforeUpload" :onErr="onErr" :ImgStyle="imageStyle">
                <template #context="{ status }">
                    <slot :status="status" name="context">
                        {{ context[status] }}
                    </slot>
                </template>
                <template #result="{ status, imgUrl }">
                    <slot name="result" :status="status" :imgUrl="imgUrl">
                        <img :src="imgUrl" v-if="imgUrl" class="showImg" :style="imageStyle">
                        <span v-else>
                            图片加载失败
                        </span>
                    </slot>
                </template>
            </UpLoad>
        </div>
        <From :fromData="fromData" :sumbit="sumbit ? sumbit : '提交'" @on-sumbit="inputSumbit" :from="from" />
    </div>
</template>

<script lang='ts'>
interface inputResult {
    title: string
    content: string
}
import { defineComponent, PropType, StyleValue } from 'vue'
import From, { FromProps, useFrom } from '../../components/From/index.vue'
import UpLoad, { result, beforeUpload, onErr } from '../../components/UpLoad/index.vue'
export { useFrom }
type inputSumbit = (result: any) => void
type finish = (result: result) => void
export type {
    FromProps, onErr, beforeUpload, finish, inputSumbit, inputResult, result
}
export default defineComponent({
    name: 'Create',
    components: { UpLoad, From },
    props: {
        inputSumbit: Function as PropType<inputSumbit>,
        finish: Function as PropType<finish>,
        beforeUpload: Function as PropType<beforeUpload>,
        onErr: Function as PropType<onErr>,
        fromData: {
            type: Object as PropType<FromProps>,
            required: true
        },
        upLoadtitle: {
            type: String,
        },
        title: {
            type: String,
            required: true,
        },
        sumbit: String,
        from: Object as PropType<ReturnType<typeof useFrom>>,
        uploadBackground: String,
        defaultImg: String,
        imageStyle: Object as PropType<StyleValue>
    },
    setup() {
        const context = ['单击上传', '上传中', '上传完成', '上传失败,请重试']
        return {
            context
        }
    }
})
</script>
<style scoped lang="less">
.creat_box {
    width: 90%;
    margin: 0 auto;
    max-width: 800px;

    .upload_box {
        height: 300px;
        width: 100%;
    }
}

.showImg {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}
</style>